<template>
    <div class="register_container">
        <img class="card" src="../assets/img1.jpg" center center no-repeat></img>
        <div class="register_box">

            <div class="avatar_box">
                <img src="../assets/logo.png" alt/>
            </div>
            <!-- 表单区域 -->
            <el-form ref="registerFormRef" :rules="registerRules" :model="registerForm" class="register_form" label-width="0">
                <!-- 用户名-->
                <el-form-item prop="username">
                    <el-input v-model="registerForm.username" prefix-icon="iconfont icondenglu" placeholder="用户名"></el-input>
                </el-form-item>
                <!-- 密码-->
                <el-form-item prop="password">
                    <el-input v-model="registerForm.password" prefix-icon="iconfont iconmima" type="password" placeholder="密码"></el-input>
                </el-form-item>
                <!-- 确认密码-->
                <el-form-item prop="checkpassword">
                    <el-input v-model="registerForm.checkpassword" prefix-icon="iconfont iconmima" type="password" placeholder="重复密码"></el-input>
                </el-form-item>
                <!-- 管理员权限码-->
                <el-form-item prop="adminnum">
                    <el-input v-model="registerForm.adminnum" placeholder="管理员注册码(选填)"></el-input>
                </el-form-item>
                <!-- 验证码-->
                <el-form-item prop="vcode">
                    <el-input placeholder="请输入验证码" v-model="vcode" prefix-icon="iconfont iconmima" style="width: 50%"></el-input>
                    <span class="demonstration"></span>
                    <el-image
                            style="top:15px;width: 100px; height: 40px"
                            :src="src"  @click="getImage" :key="key"
                            :fit="fit"></el-image>
                </el-form-item>
                <!-- 按钮-->
                <el-form-item class="btns">
                    <el-button type="primary" @click="login()">返回登录</el-button>
                    <el-button type="primary" @click="register()">注册</el-button>
                    <el-button type="info" @click="resetRegisterForm()">重置</el-button>
                </el-form-item>

            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        created() {
            this.getImage();//获取验证码
            //回车登陆监听事件
            var _this = this;
            document.onkeydown = function(e) {
                let key = window.event.keyCode;
                if (key == 13) {
                    _this.register();
                }
            }

        },
        data () {
            let code = null;
            this.$http.get("register/getImage").then(function (resp) {
                code=resp.data.data;
            })
            // 密码验证
            const pwdCheck = async(rule, value, callback) => {
                let reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[~@#$%\*-\+=:,\\?\[\]\{}]).{6,16}$/
                if (value.length < 4) {
                    this.changeFlag = 2;
                    return callback(new Error('密码不能少于4位！'));
                } else if (value.length > 12) {
                    this.changeFlag = 2;
                    return callback(new Error('密码最长不能超过12位！'));
                }
               /* else if (!reg.test(value)) {
                    this.changeFlag = 2;
                    return callback(new Error('密码输入有误，请检查格式是否正确！'));
                } */
                else {
                    this.changeFlag = 1;
                    callback()
                }
            }
            // 重复密码验证
            const pwdAgainCheck = async(rule, value, callback) => {
                if (value.length < 1) {
                    this.changeAgainFlag = 2;
                    return callback(new Error('重复密码不能为空！'));
                } else if(this.registerForm.password != this.registerForm.checkpassword){
                    this.changeAgainFlag = 2;
                    return callback(new Error('两次输入密码不一致！'));
                }else{
                    this.changeAgainFlag = 1;
                    callback()
                }
            };
            return {
                vcode:null,
                t_code:'',
                code:"",
                src:"",
                key:"",
                fit: 'fill',
                // 'contain', 'cover', 'none', 'scale-down',
                url: '',
                changeFlag: 0,
                changeAgainFlag: 0,
                registerForm:{
                    username:null,
                    password:null,
                    checkpassword:null,
                    adminnum:null,
                },

                //验证对象
                registerRules:{
                    //校验用户名
                    username:[
                        { required: true, message: '用户名为必填项', trigger: 'blur' },//必填项验证
                        { min: 4, max: 12, message: '长度在 4 ~ 12 个字符', trigger: 'blur' }//长度验证
                    ],
                    //校验密码
                    password:[
                        { required: true, message: '密码为必填项', trigger: 'blur' },//必填项验证
                        { required: true, validator: pwdCheck, trigger: 'blur' }//密码验证
                    ],
                    //校验重复密码
                    checkpassword:[
                        { required: true, message: '请重复密码', trigger: 'blur' },//必填项验证
                        { required: true, validator: pwdAgainCheck, trigger: 'blur' }//重复密码验证
                    ],
                    //校验管理员权限码
                    adminnum:[
                        { required: false, message: '权限码为选填项', trigger: 'blur' },//选填项验证
                        { min: 4, max: 12, message: '长度在 4 ~ 12 个字符', trigger: 'blur' }//长度验证
                    ],

                },
            };
        },
        methods:{
            getImage(){   //获取验证码
                this.$http.get("/register/getImage").then((res)=>{
                    this.src = "data:image/png;base64,"+res.data.image;
                    this.key = res.data.key;
                    this.t_code=res.data.true_code;
                    console.log(this.t_code);
                });
            },
            //重置表单内容
            resetRegisterForm(){
                this.$refs.registerFormRef.resetFields();
            },
            login(){
                this.$router.push({path:"/login"});
            },
            register(){
                //不区分大小写比较
                let a=this.t_code.toUpperCase()
                let b=this.vcode.toUpperCase()
                console.log(a==b)
                if(a!=b){
                    this.$message.error("验证码错误");
                }else {

                    const _this = this
                    console.log(this.registerForm)
                    this.$http.post("register/register", this.registerForm);

                    this.$http.post("register/updateRole", this.registerForm.adminnum);
                    this.$message.success("注册成功！！！");
                    this.$router.push({path: "/login"});
                }

            },

        },
    }
</script>

<style lang="less" scoped>
    .card{
        width: 100%;
        height: 100%;
        -webkit-filter: blur(5px);
        -moz-filter: blur(15px);
        -o-filter: blur(15px);
        -ms-filter: blur(15px);
    }
    .register_container{
        //根节点样式

        height: 100%;
    }
    .register_box{
        width: 450px;
        height: 600px;

        border-radius: 3px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        .avatar_box{
            width: 130px;
            height: 130px;
            border: 1px solid #eee;
            border-radius: 50%;
            padding: 10px;
            box-shadow: 0 0 10px #ddd;
            position: absolute;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: #0ee;
            img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color: #eee;

            }
        }
    }
    .btns{
        display: flex;
        justify-content: flex-end;
    }
    .register_form{
        position: absolute;
        bottom: 0%;
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }

</style>
